<template>
  <div>
    <div class="bg-white flex">
      <LayoutBreadcrumb class="grow" />
    </div>

    <div class="mx-2 mt-2 bg-white flex pt-2" style="height: calc(100vh - 110px)">
      <div class="w-72">
        <h1 class="ml-2 text-base">项目: {{ project.name }}</h1>
        <this-tree
          :data="project.dtuTopoList"
          ref="treeRef"
          class="mx-2 py-2 border"
          @on-check="onCheck"
          @init-draged="initDraged"
          @on-drag-start="onDragStart"
        />
      </div>
      <div class="flex-grow border relative">
        <img :src="cover" class="w-full h-full object-contain" alt="" />
        <div
          id="bind-container"
          ref="divWrap"
          class="absolute border inset-0"
          @dragover="ondragover"
          @drop="onDrop"
        ></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, createVNode, render, Fragment } from 'vue';
import { useRoute } from 'vue-router';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import thisTree from './tree.vue';
import { defHttp, HOST } from '/@/utils/http/axios';

export default defineComponent({
  components: { LayoutBreadcrumb, thisTree },
  setup(props, ctx) {
    const route = useRoute();
    const cover = ref();
    const project = ref({
      dtuTopoList: [],
    });

    const nodes = ref<any>([]);
    const treeRef = ref();
    const divWrap = ref();
    let draging = null;

    function onDragStart(e) {
      draging = e.target.dataset.key;
      console.log(draging);
    }

    function ondragover(e) {
      e.preventDefault();
    }

    function onDrop(e) {
      defHttp
        .post({
          url: '/Sensor/bind-pos',
          params: {
            id: draging.substring(3),
            x: e.clientX,
            y: e.clientY,
          },
        })
        .then((res) => {
          getProject();
        });
      // console.log(e);
      // return;
      // if (draging) {
      //   let find = nodes.value.find((item) => item.key === draging);
      //   nodes.value = nodes.value.filter((item) => item.key !== draging);
      //   nodes.value.push({
      //     x: e.clientX,
      //     y: e.clientY,
      //     key: find.key,
      //     title: find.title,
      //     visible: true,
      //   });
      //   draging = null;
      // } else {
      //   nodes.value.push({
      //     x: e.clientX,
      //     y: e.clientY,
      //     key: treeRef.value.target.key,
      //     title: treeRef.value.target.title,
      //     visible: true,
      //   });
      // }

      // renderNodes();

      // treeRef.value.dragDone(e);
    }

    function renderNodes() {
      render(
        createVNode(
          Fragment,
          null,
          nodes.value
            .filter((item) => item.visible)
            .map((item) => {
              return createVNode(
                'span',
                {
                  class: 'text-white absolute',
                  style: `top: ${item.y - 116}px; left: ${item.x - 525}px`,
                  'data-key': item.key,
                  draggable: true,
                  onDragstart: onDragStart,
                },
                item.title,
              );
            }),
        ),
        divWrap.value,
      );
    }

    function onCheck(checked) {
      nodes.value = nodes.value.map((item) => {
        item.visible = checked.includes(item.key);
        return item;
      });
      renderNodes();
    }

    function initDraged(dragedNodes) {
      nodes.value = dragedNodes;
      renderNodes();
    }

    function getProject() {
      defHttp.get({ url: `/project/get-sensor-topo?id=${route.params.id}` }).then((res) => {
        project.value = res.data;
        if (res.data.logo) {
          let path = res.data.logo.split(',')[0];
          cover.value = HOST + '/szfiles' + path;
        }
      });
    }

    getProject();

    return {
      treeRef,
      ondragover,
      onDrop,
      renderNodes,
      divWrap,
      onCheck,
      onDragStart,
      project,
      initDraged,
      cover,
    };
  },
});
</script>
  